import { Button, Form, Input, InputNumber, Radio, Select, Space } from 'antd';

const BaseForm = () => {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log('success', values)
  }

  const onReset = () => {
    form.resetFields()
  }

  return (
    <div className="card content-box">
      <Form form={form} name="base" onFinish={onFinish} labelCol={{ span: 1 }} initialValues={{
        job: "前端",
        age: 0,
      }}>
        <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
          <Input />
        </Form.Item>
        <Form.Item name="age" label="年龄" rules={[{ required: true, message: '请输入年龄' }]}>
          <InputNumber min={0} controls />
        </Form.Item>
        <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请输入性别' }]}>
          <Select allowClear placeholder="请选择" options={[
            { label: '男', value: '1' },
            { label: '女', value: '2' },
            { label: '中性', value: '3' }
          ]} />
        </Form.Item>
        <Form.Item name="job" label="职业">
          <Radio.Group>
            <Radio value="前端">前端</Radio>
            <Radio value="java">java</Radio>
            <Radio value="测试">测试</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType='submit'>提交</Button>
            <Button htmlType='button' onClick={onReset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  )
}

export default BaseForm;